<template>
  <ContentWrap title="购买会员统计" class="h-1/1 !mb-0px">
    <!-- 折线图 -->
    <Echart :height="300" :options="lineChartOptions" />
  </ContentWrap>
</template>
<script lang="ts" setup>
import { EChartsOption } from 'echarts'
import * as MemberStatisticsApi from '@/api/mall/statistics/member'
import { DictDataType, getIntDictOptions } from '@/utils/dict'

/** 购买会员统计卡片 */
defineOptions({ name: 'UserStatisticsCard' })

const loading = ref(true) // 加载中
/** 折线图配置 */
const lineChartOptions = reactive<EChartsOption>({
  tooltip: {
    trigger: 'item',
    confine: true,
    formatter: '{a} <br/>{b} : {c} ({d}%)'
  },
  legend: {
    bottom: '0%',
    left: 'center',
    textStyle: {
      color: 'auto'
    }
  },
  // roseType: 'area',
  series: [
    {
      name: '会员终端',
      type: 'pie',
      center: ['50%', '40%'],

      label: {
        show: false
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 30, name: '未消费客户' },
        { value: 30, name: '消费1次客户' },
        { value: 30, name: '消费2-5次客户' },
        { value: 30, name: '消费5-10次客户' },
        { value: 30, name: '消费10次以上客户' }
      ]
    }
  ]
}) as EChartsOption

const getMemberRegisterCountList = async () => {
  loading.value = true
  // const list = await MemberStatisticsApi.getMemberTerminalStatisticsList()
  // const dictDataList = getIntDictOptions(DICT_TYPE.TERMINAL)
  // lineChartOptions.series![0].data = dictDataList.map((dictData: DictDataType) => {
  //   const userCount = list.find(
  //     (item: MemberStatisticsApi.MemberTerminalStatisticsRespVO) => item.terminal === dictData.value
  //   )?.userCount
  //   return {
  //     name: dictData.label,
  //     value: userCount || 0
  //   }
  // })
  loading.value = false
}

/** 初始化 **/
onMounted(() => {
  getMemberRegisterCountList()
})
</script>
